﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>jQuery天气应用程序-jq22.com</title>
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css">
</head>
<body>

<div class="wrapper">
    <div class="align">
        <div class="app">
            <div id="main">
                <!-- Settings Menu -->
                <div id="introscreen"><img src="img/578457.svg"></div>

                <!---- Settings Button -->
                <span id="btn-right">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</span>
                <!----End Settings Button -->

                <!-- Info Message-->
                <div id="info-msg">
                    <div class="msg-box">
                        <h1></h1>
                        <p></p>
                    </div>
                </div>
                <!--End Info Message-->

                <div id="settings" class="">

                    <p id="settings-info"><i class="fa fa-cog" aria-hidden="true"></i> Settings</p>

                    <div class="search-container">
                        <label>
                            <input type="text" id="search" placeholder="Search City..." required/>
                            <i class="fa fa-search" aria-hidden="true"></i>
                            <button type="button" id="update-button" placeholder="Update">Update</button>
                        </label>
                    </div>
                    <ul>
                        <li>
                            <div class="text">
                                <p>Temperature Unit</p>
                            </div>
                            <label class="switch">
                                <input type="checkbox" id="unit">
                                <div class="slider">
                                    <p class="left"><i class="c" aria-hidden="true">°C</i></p>
                                    <p class="right"><i class="f" aria-hidden="true">°F</i></p>
                                </div>
                            </label>
                            <div class="sub-info">Choose between °C or °F.</div>
                        </li>

                        <li>
                            <div class="text">
                                <p>Atmospheric Conditions</p>
                            </div>
                            <label class="switch">
                                <input type="checkbox" id="atm">
                                <div class="slider">
                                    <p class="left"><i class="fa fa-check" aria-hidden="true"></i></p>
                                    <p class="right"><i class="fa fa-times" aria-hidden="true"></i></p>
                                </div>
                            </label>
                            <div class="sub-info">Humidity, pressure and visibility of the atmosphere.</div>
                        </li>

                        <li>
                            <div class="text">
                                <p>Sunrise/Sunset</p>
                            </div>
                            <label class="switch">
                                <input type="checkbox" id="sun">
                                <div class="slider">
                                    <p class="left"><i class="fa fa-check" aria-hidden="true"></i></p>
                                    <p class="right"><i class="fa fa-times" aria-hidden="true"></i></p>
                                </div>
                            </label>
                            <div class="sub-info">Sunset/Sunrise hours and total hours of light.</div>
                        </li>

                        <li>
                            <div class="text">
                                <p>Wind Conditions</p>
                            </div>
                            <label class="switch">
                                <input type="checkbox" id="wind">
                                <div class="slider">
                                    <p class="left"><i class="fa fa-check" aria-hidden="true"></i></p>
                                    <p class="right"><i class="fa fa-times" aria-hidden="true"></i></p>
                                </div>
                            </label>
                            <div class="sub-info">Chill, direction and the speed of the wind.</div>
                        </li>

                        <li>
                            <div class="text">
                                <p>Choose a theme</p>
                                <div class="row">
                                    <span class="green"></span>
                                    <span class="turqoise"></span>
                                    <span class="blue"></span>
                                    <span class="purple"></span>
                                </div>
                            </div>
                            <div class="sub-info">Select the desired theme. Press the "Save" button to update the
                                theme!
                            </div>
                        </li>

                    </ul>

                    <button type="button" id="save-button" placeholder="Update">Save</button>


                </div>
                <!-- End Settings Menu  -->

                <div id="central">
                    <div id="top-menu-info">
                        <p id="location">
                            <i class="fa fa-map-marker" aria-hidden="true"></i>
                            <span>Bucharest</span>
                        </p>
                    </div>

                    <div id="temp-div">
                        <div id="icon-temp">
                            <p>Sunny</p>
                            <i class="wi wi-day-cloudy" aria-hidden="true"></i>
                        </div>
                        <p id="current-temp-big">
                            <span id="ctb">17</span>
                            <span id="ctbicon">°C</span>
                        </p>
                    </div>

                    <div id="weather-menu">
						<span href="#" id="weather-menu-btn">
							<i class="fa fa-chevron-up" aria-hidden="true"></i>
						</span>

                        <ul>
                            <li id="atmli">
                                <p class="li_title">Atmospheric Conditions</p>
                                <div id="humidity" class="col-1">
                                    <i class="wi wi-humidity" aria-hidden="true"></i>
                                    <span>Humidity <br> <span id="hd">NaN</span></span>
                                </div>
                                <div id="pressure" class="col-2">
                                    <i class="wi wi-barometer" aria-hidden="true"></i>
                                    <span>Pressure <br> <span id="pd">NaN</span></span>
                                </div>
                                <div id="visibility" class="col-3">
                                    <i class="wi wi-day-fog" aria-hidden="true"></i>
                                    <span>Visibility <br>  <span id="vd">NaN</span></span>
                                </div>
                            </li>
                            <li id="sunli">
                                <p class="li_title">Sunrise/Sunset</p>
                                <div id="sunrise" class="col-1">
                                    <i class="wi wi-sunrise" aria-hidden="true"></i>
                                    <span>Sunrise <br> <span id="srd">NaN</span></span>
                                </div>
                                <div id="totallight" class="col-2">
                                    <i class="wi wi-time-4" aria-hidden="true"></i>
                                    <span>Hours of light<br> <span id="td">NaN</span></span>
                                </div>
                                <div id="sunset" class="col-3">
                                    <i class="wi wi-sunset" aria-hidden="true"></i>
                                    <span>Sunset <br> <span id="ssd">NaN</span></span>
                                </div>
                            </li>
                            <li id="windli">
                                <p class="li_title">Wind Conditions</p>
                                <div id="chill" class="col-1">
                                    <i class="wi wi-thermometer-exterior
" aria-hidden="true"></i>
                                    <span>Chill <br> <span id="cd">NaN</span></span>
                                </div>
                                <div id="direction" class="col-2">
                                    <i class="wi wi-wind from-270-deg" aria-hidden="true"></i>
                                    <span>Direction <br> <span id="dd">NaN</span></span>
                                </div>
                                <div id="speed" class="col-3">
                                    <i class="wi wi-strong-wind" aria-hidden="true"></i>
                                    <span>Speed <br> <span id="sd">NaN</span></span>
                                </div>
                            </li>
                            <li id="forecastli">
                                <p class="li_title">9 Days Forecast</p>
                                <span class="day_left">
									<i class="fa fa-chevron-left" aria-hidden="true"></i>
								</span>
                                <span class="day_right">
									<i class="fa fa-chevron-right" aria-hidden="true"></i>
								</span>
                                <div class="li_row">

                                    <div class="col-1 day10item">
                                        <i class="wi wi-day-sunny" aria-hidden="true"></i>
                                        <span>Mon <br> 20°C</span>
                                    </div>
                                    <div class="col-2 day10item">
                                        <i class="wi wi-day-cloudy" aria-hidden="true"></i>
                                        <span>Tue <br> 22°C</span>
                                    </div>
                                    <div class="col-3 day10item">
                                        <i class="wi wi-day-rain" aria-hidden="true"></i>
                                        <span>Wed <br> 15°C</span>
                                    </div>

                                    <div class="col-1 day10item">
                                        <i class="wi wi-day-sunny" aria-hidden="true"></i>
                                        <span>Thu <br> 20°C</span>
                                    </div>
                                    <div class="col-2 day10item">
                                        <i class="wi wi-day-cloudy" aria-hidden="true"></i>
                                        <span>Fri <br> 22°C</span>
                                    </div>
                                    <div class="col-3 day10item">
                                        <i class="wi wi-day-rain" aria-hidden="true"></i>
                                        <span>Sat <br> 15°C</span>
                                    </div>

                                    <div class="col-1 day10item">
                                        <i class="wi wi-day-sunny" aria-hidden="true"></i>
                                        <span>Mon <br> 20°C</span>
                                    </div>
                                    <div class="col-2 day10item">
                                        <i class="wi wi-day-cloudy" aria-hidden="true"></i>
                                        <span>Tue <br> 22°C</span>
                                    </div>
                                    <div class="col-3 day10item">
                                        <i class="wi wi-day-rain" aria-hidden="true"></i>
                                        <span>Wed <br> 15°C</span>
                                    </div>
                                </div>

                                <div id="dotmenu">
                                    <span class="currentday"></span>
                                    <span></span>
                                    <span></span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>


    </div>
</div>

<script type="text/javascript" src="js/index.js"></script>



</body>
</html>
